<template>
	<view class="content">
		<scroll-view style="width: 100%;position: fixed;top: 0;z-index: 100;" class="scroll-view_H outer-scroll-view" scroll-x="true" scroll-left="120"
			:show-scrollbar="false">
			<view v-for="(item, index) in category" @click="SwitchVariety(index, item.Category_SerialNumber)" :key="index"
				:class="{ active: activeIndex === index }" class="scroll-view-item_H uni-bg-red" style="cursor: pointer">{{
					item.Category_Name }}</view>
		</scroll-view>
		<view v-if="tableData.length == 0" class="cont  justify-center  flex align-center zanw mt-10" style="height: 100vh;">
			<text>
				暂无该类数据
			</text>
		</view>
		<view class="cont mt-10" v-else>
			<view class="item" v-for="(item, index) in tableData" :key="index" @click="
				handleTabs(
					item.Group_Purchasing_SerialNumber,
					item.Enterprise_Info_SerialNumber
				)
				">
				<view class="leftimg">
					<image :src="Domain_IMG + item.Picture_URL" mode="scaleToFill" />
				</view>
				<view class="right">
					<view class="title">{{ item.Article_Name }}</view>
					<view class="jg">{{ item.Total_Quantity + "/" + item.Unit }}</view>
					<view class="fl">{{ item.Category_Name }}</view>
					<view class="cont2">
						<view class="left">
							<view>发布人:{{ item.Contacts }} </view>
							<view>所属企业 :{{ item.Enterprise_Name }} </view>
						</view>
					</view>
					<view class="but"> 查看详情 </view>
				</view>
			</view>
			<view class="text-center font-sm">{{ loadingText }}</view>
		</view>
		<view v-if="tag" @click="goTop" class="bg-white flex  align-center"
			style="width: 120rpx;height: 120rpx;border-radius: 50%;box-shadow: 0 0 15rpx rgba(0,0,0,.5);position: fixed;right: 80rpx;bottom: 80rpx;justify-content: center;">
			<image style="height: 80%;width: 80%;" src="https://digital.essc.top/dist/zjl_icon/gotop.png" mode=""></image>
		</view>
	</view>
</template>

<script>
const app = getApp();
// import { getUserAllFQ } from "@/api/traceability.js";
import {
	GoodsFileInquiry
} from "@/api/global.js";
import {
	GroupProcureAll,
	GroupProcureAllAction
} from "@/api/group.js";
export default {
	data() {
		return {
			activeIndex: 0,
			Domain_IMG: app.globalData.Domain_IMG,
			Domain_Business: app.globalData.Domain_Business,
			ThemeColors: app.globalData.ThemeColors,
			form: {
				page: 1, //页数
				limit: 5, //每页数据条数
				User_Type: "",
			},
			tableData: [],
			total: 0,
			category: [
				//用户专区分类筛选
			],
			form: {
				Article_Name: "",
				Category_SerialNumber: "",
				Enterprise_Info_SerialNumber: "",
				Type: "0",
				page: 1, //页数
				limit: 5, //每页数据条数
			},
			timer: null,
			loadingText: '向下拉取加载更多',
			scrollTop: 0,
			tag: false,
		};
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop
	},
	watch: {
		scrollTop: function (newValue, oldValue) {
			if (newValue > 800) {
				this.tag = true
			} else {
				this.tag = false
			}
		},
	},
	onReachBottom() {
		if (this.loadingText != '没有更多了') {
			this.form.page++
			this.throttling();
		}
	},
	onLoad() {
		this.tableData = []
		this.getList();
		this.getData(this.form);
	},
	methods: {
		async getList() {
			//类别
			const res = await GoodsFileInquiry({
				data: {
					Data: "category",
				},
			});
			this.category.unshift({
				Category_Name: "全部",
				Category_SerialNumber: "",
			});
			this.category.push(...res);
		},
		throttling(delay = 500) {
			clearTimeout(this.timer)
			this.timer = setTimeout(() => {
				this.getData(this.form)
			}, delay)
		},
		handleTabs(Group_Purchasing_SerialNumber, Enterprise_Info_SerialNumber) {
			//跳转
			uni.navigateTo({
				url: "/pages/Market/MarketDetail?Group_Purchasing_SerialNumber=" +
					Group_Purchasing_SerialNumber +
					"&Enterprise_Info_SerialNumber=" +
					Enterprise_Info_SerialNumber,
			});
		},
		SwitchVariety(i, e) {
			//切换品种
			if (this.form.Category_SerialNumber == e) {
				//重复点击不允许调接口
				return;
			}
			this.goTop()
			this.tableData = []
			this.activeIndex = i;
			this.form.Category_SerialNumber = e;
			this.form.page = 1;
			this.getData(this.form);
		},
		goTop() {
			uni.pageScrollTo({
				scrollTop: 0
			})
		},
		async getData(data) {
			//分页查询所有供应数据
			uni.showLoading({
				title: '加载中...'
			})
			this.loadingText = '加载中...'
			const res = await GroupProcureAllAction({
				data,
			});
			uni.hideLoading()
			if (
				(res.redirect && res.redirect == "REDIRECT") ||
				(res.REDIRECT && res.REDIRECT == "REDIRECT")
			) {
				uni.removeStorageSync("token");
				const res = await GroupProcureAll({
					data,
				});
				if (res.Status == "success") {
					this.tableData.push(...res.tableData)
					this.total = Number(res.limit)
					console.log(res.limit)
					if (this.total == this.tableData.length) {
						this.loadingText = '没有更多了'
					} else {
						this.loadingText = '下拉加载更多'
					}
				}
			} else if (res.Status == "success") {
				this.tableData.push(...res.tableData)
				this.total = Number(res.limit)
				console.log(res.limit)
				if (this.total == this.tableData.length) {
					this.loadingText = '没有更多了'
				} else {
					this.loadingText = '下拉加载更多'
				}
			}
		},
	},
};
</script>

<style lang="scss">
.scroll-Y {
	height: 100rpx;
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
	background-color: #fff;
}

.scroll-view-item {
	height: 100rpx;
	text-align: center;
	font-size: 36rpx;
	padding: 0 20rpx;
}

.scroll-view-item_H {
	display: inline-block;
	height: 100rpx;
	line-height: 70rpx;
	text-align: center;
	font-size: 36rpx;
	padding: 10rpx 36rpx;
	box-sizing: border-box;
}

.active {
	border-bottom: 4px solid #28a745;
	border-radius: 10rpx;
	color: #28a745;
}

.outer-scroll-view {
	show-scrollbar: false;
}

.content {
	width: 100%;
	// height: calc(100vh - 94px);
	background-color: #f5f5f5;
	padding: 0 0 20rpx 0;

	.zanw {
		font-size: 24rpx;
		border-radius: 20rpx;
		width: 100%;
	}

	.cont {
		height: calc(100vh -44px);
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #f5f5f5;

		.item {
			border-radius: 20rpx;
			background-color: #fff;
			padding: 25rpx;
			box-sizing: border-box;
			margin: 0 0 30rpx 0;
			display: flex;

			// width: 60%;
			.leftimg {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 258rpx;
					height: 258rpx;
					border-radius: 20rpx;
					margin: 0 10rpx 0 0;
				}
			}

			.right {
				width: 60%;
				padding: 10rpx;
				box-sizing: border-box;
				flex: 1;

				.fl {
					font-size: 28rpx;
				}
			}

			.title {
				font-size: 34rpx;
				color: #222;
				line-height: 34rpx;
				font-weight: 500;
			}

			.jg {
				font-size: 34rpx;
				color: #ff442f;
				vertical-align: middle;
				margin-right: 20rpx;
				// flex: 0 0 auto;
				margin: 20rpx 0 20rpx;
			}

			.cont2 {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					font-size: 26rpx;
					color: rgba(34, 34, 34, 0.5);
					line-height: 26rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					view {
						margin-top: 10px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.but {
				margin: 20rpx 0 0 0;
				width: 132rpx;
				height: 54rpx;
				border: 1px solid #39bf3e;
				border-radius: 28rpx;
				font-size: 26rpx;
				color: #39bf3e;
				text-align: center;
				letter-spacing: 0;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.contI {
		height: calc(100vh - 50px);
		color: #222;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
}
</style>